<template>
  <view>
    <view class="cm-text-14" :style="[templateStyle]" v-if="isLoaded">
      <!-- 起局信息显示部分 -->
      <cm-label-text label="公历时间" label-width="80" border-split border-bottom>{{ solarTimeText }}</cm-label-text>
      <cm-label-text label="农历时间" label-width="80" border-split>{{ lunarTimeText }}</cm-label-text>
      <cm-sticky cm-class="app-card-bg-color_bg" :top="CustomBar">
        <cm-label-text
          label="时间干支" label-width="50" border-top border-bottom border-split>
          <view class="cm-flex cm-text-center">
            <view class="cm-flex cm-flex-col cm-flex-g-1"
              v-for="(count, index) in 4" :key="index">
              <bagua-element ele-class="cm-bold" :bagua="liuren.date.ganzhi[index].gan"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(liuren.date.ganzhi[index].gan)"></bagua-element>
              <bagua-element ele-class="cm-bold" cm-class="cm-margin-top-10" :bagua="liuren.date.ganzhi[index].zhi"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(liuren.date.ganzhi[index].zhi)"></bagua-element>
            </view>
          </view>
        </cm-label-text> 
      </cm-sticky>
      <view class="cm-flex">
        <view class="cm-w-50 app-border-color_ex-right">
          <cm-label-text label="用神" label-width="50" border-split border-bottom>
            <div class="cm-flex cm-flex-j-between cm-flex-a-center">
              <div>
                <bagua-element :bagua="liuren.keyGanzhi.gan"
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(liuren.keyGanzhi.gan)"></bagua-element>
                <bagua-element :bagua="liuren.keyGanzhi.zhi"
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(liuren.keyGanzhi.zhi)"></bagua-element>                   
              </div>
              
              <cm-button :cmStyle="{ padding: '0' }" type="primary" outlined :border="false" @click="selectLiurenKeyGanzhiHandler">修改</cm-button>
            </div>

          </cm-label-text>
        </view>
        <view class="cm-w-50">
          <cm-label-text label="生肖" label-width="50" border-split border-bottom>
            <div class="cm-flex cm-flex-j-between cm-flex-a-center">
              <bagua-element :bagua="liuren.live"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(liuren.live)"></bagua-element>       
              
              <cm-button :cmStyle="{ padding: '0' }" type="primary" outlined :border="false" @click="selectLiurenShengxiaoHandler">修改</cm-button>
            </div>
          </cm-label-text>
        </view>
      </view>
      <view class="cm-flex">
        <view class="cm-w-50 app-border-color_ex-right">
          <cm-label-text label="月将" label-width="50" border-split border-bottom>
            <bagua-element :bagua="liuren.yuejiang" yinyang wuxing
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(liuren.yuejiang)"></bagua-element>
          </cm-label-text>
        </view>
        <view class="cm-w-50">
          <cm-label-text label="贵人" label-width="50" border-split border-bottom>
            <view class="cm-flex cm-flex-j-between cm-flex-a-center">
              <view class="cm-flex cm-flex-a-center">
                <bagua-element :bagua="liuren.guiGod" yinyang wuxing
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(liuren.guiGod)"></bagua-element>
                <view class="cm-text-16">({{ liuren.guiGodYinyang === 0 ? '阳' : '阴' }})</view>                
              </view>
              
              <cm-button :cmStyle="{ padding: '0' }" type="primary" outlined :border="false" @click="selectGuiGodTypeHandler">修改</cm-button>
            </view>

          </cm-label-text>
        </view>
      </view>
      
      <!-- 六壬局的位置 -->
      <liuren-content ref="liurenContent" :setting="toolSetting"
        @change="liurenChangeHandler"
        @special="liurenSpecialHandler"
        @finish="liurenFinishedHandler"></liuren-content>
      
      <!-- 三传 时运命 -->
      <view class="cm-flex cm-text-center app-border-color_ex-top app-border-color_ex-bottom">
        <view class="cm-w-70 cm-padding-10 app-border-color_ex-right">三传</view>
        <view class="cm-w-30 cm-padding-10">时运命</view>
      </view>
      <view class="cm-flex cm-text-center app-border-color_ex-bottom">
        <view class="cm-w-70 cm-padding-10 app-border-color_ex-right cm-flex cm-flex-j-around">
          <view class="cm-flex cm-flex-r-col cm-flex-j-around">
            <bagua-element v-for="(item, index) in liuren.ganLegend" :key="item.id"
              :bagua="item"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item)"></bagua-element>
          </view>
          <view class="cm-flex cm-flex-r-col cm-flex-j-around">
            <bagua-element v-for="(item, index) in liuren.zhiLegend" :key="item.id"
              :bagua="item"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item)"></bagua-element>
          </view>
        </view>
        <view class="cm-w-30 cm-padding-10 cm-flex cm-flex-col cm-flex-j-around">
          <bagua-element :bagua="liuren.destiny.time"
            :season="seasonIndex" :compare-selected="compareSelected"
            @click="elementClickHandler(liuren.destiny.time)"></bagua-element>
          <bagua-element :bagua="liuren.destiny.destiny"
            :season="seasonIndex" :compare-selected="compareSelected"
            @click="elementClickHandler(liuren.destiny.destiny)"></bagua-element>
          <bagua-element :bagua="liuren.destiny.live"
            :season="seasonIndex" :compare-selected="compareSelected"
            @click="elementClickHandler(liuren.destiny.live)"></bagua-element>
        </view>
      </view>
      
    </view>
    
    <!-- 用神选择框 -->
    <cm-picker-ganzhi-popup type="ganzhi" ref="liurenKeyGanzhiPicker"
      @confirm="changeKeyGanzhiHandler"></cm-picker-ganzhi-popup>
    <!-- 宿命选择框 -->
    <cm-picker-ganzhi-popup type="zhi" ref="liurenShengxiaoPicker"
      @confirm="changeShengxiaoHandler"></cm-picker-ganzhi-popup>
    <!-- 贵神阴阳选择框 -->
    <cm-picker-popup ref="guiGodTypePicker" :pickerData="[guiGodPickerData]" exist
      @confirm="changeGuiGodTypeHandler"></cm-picker-popup>
    
    <!-- 底部工具栏 -->
    <bagua-tool ref="liurenTool" :options="toolOptions" @change="toolChangeHandler"></bagua-tool>
    <!-- 载入 -->
    <cm-loading @loading="init"></cm-loading>
  </view>
</template>

<script src="./liurenTemplate.js"></script>

<style lang="stylus">
@import './liurenTemplate.styl'
</style>